<template>
    <div class="patient_list">
        <div class="bg_ff clr_1c8 h40 row w100">
            <span class="left_btn">
                <i class="icon iconfont ml10  clr_1c8" @click="showFiltrateFn">&#xe88a;</i>
                <i class="el-icon-refresh ml10  clr_1c8" @click="getPatientList()"></i>
            </span>


            <span class="f18 clr_2b3 w120">患者身份确认</span>
            <div class="right_btn tr"> <span class="mr10 "> {{ userInfo.UserName }} <i
                        class="el-icon-switch-button fw800" @click="loginOutFn"></i>
                </span></div>
        </div>

        <div class="w100 number_input  bg_fff">
            <el-input ref="ruleDesc" clearable placeholder="请扫描" autofocus v-model="scanNumber"
                @keydown.enter.native="handleMatchFn">
                <!-- <i slot="prefix" class="el-input__icon el-icon-search"></i> -->

            </el-input>
        </div>
        <div class="bg_ff pl10 pr10">
            <el-tabs :key="tabKey" ref="topTabs" v-model="activeName" @tab-click="handleClick" class="slide-tabs">
                <el-tab-pane :label="item.name" :name="item.DicCode" v-for="item in tabs"></el-tab-pane>
            </el-tabs>
        </div>
        <div class="list_content">
            <PatientCellVue v-for="(item, index) in patientList" :index="index" :patientData="item"
                @click="detailShowFn">
            </PatientCellVue>
        </div>
        <ListFiltrateVue :filtrateData="filtrateData" :tabList="tabList" @search="searchFn"
            @closeFiltrate="closeFiltrateFn">
        </ListFiltrateVue>
        <ConfirmDialogVue v-if="confirmDialog.show" :activeName="activeName" :confirmDialog="confirmDialog"
            @close="closeConfirmDialogFn">
        </ConfirmDialogVue>
        <LoginOutVue :loginOutDialogShow="loginOutDialogShow" @close="closeLoginOutFn"></LoginOutVue>
    </div>
</template>

<script>
import ListFiltrateVue from './components/ListFiltrate'
import PatientCellVue from './components/PatientCell'
import LoginOutVue from '../Login/components/loginOut'
import ConfirmDialogVue from './components/ConfirmDialog.vue'
import commonTool from '@/api/common'
import {
    getPatientList,
    GetSearchTabList
} from '@/api/user'
import store from '@/store'
// import { mapGetters, mapMutations } from 'vuex';
export default {
    data() {
        return {
            tabKey:1,
            tabList: [],
            tabs: [
                { name: '全部', DicCode: '0', DicValue: '全部',count:0},
                { name: '已预约', DicCode: '1', DicValue: '已预约',count:0},
                { name: '已签到', DicCode: '2', DicValue: '已签到',count:0},
                { name: '待接管', DicCode: '3', DicValue: '待接管',count:0},
                { name: '待摄片', DicCode: '4', DicValue: '待摄片',count:0},
                { name: '待取袋', DicCode: '5', DicValue: '待取袋',count:0},
                { name: '待拔针', DicCode: '6', DicValue: '待拔针',count:0},
            ],
            allPatientList: [],
            activeName: '1',
            userInfo: {},
            scanNumber: '',
            loginOutDialogShow: false,
            confirmDialog: {
                show: false,
            },
            filtrateData: {
                show: false,
                roomList: [],
            },
            patientList: [],
            searchData: {},
            refreshTime: '',
        };
    },
    computed: {
        // ...mapGetters(['loginInfo']),
    },
    watch: {
        scanNumber: {
            // handler(val) {
            //     if (val) {
            //         //调用接口并弹框
            //         //
            //         // this.getPatientInfo()
            //         let item = this.patientList.find(e => e.AccessionNumber == val || e.MedrecNo == val)
            //         if (item) {
            //             this.scanNumber = ''
            //             this.confirmDialogShowFn(item)
            //         }
            //     }
            // }
        }
    },
    mounted() {
        this.loginInfo = store.getters.loginInfo
        this.userInfo = JSON.parse(this.loginInfo)
        this.init()
    },
    methods: {
        // ...mapMutations(
        //     {
        //         setLogin: 'user/set_loginInfo'
        //     }),
        getTabList() {
            GetSearchTabList().then(([res, err]) => {
                if (res?.code == 0) {
                    this.tabList = res?.ResultList || []
                    this.tabList = this.tabList.map(e => ({ ...e, name: e.DicValue,count:0 }))
                }
            })
        },
        handleClick(val) {
            //状态变化？
            console.log('当前的tab', val);
            // this.getPatientList()
            this.getCurrentList()

        },
        handleMatchFn() {
            if (this.activeName == '0' || this.activeName == '1') {
                this.$message.warning('当前tab不支持核对操作')
                return
            }
            //检查号、病历号、申请单号
            let item = this.patientList.find(e => e?.AccessionNumber == this.scanNumber || e?.MedrecNo == this.scanNumber || e?.HisKeyNo == this.scanNumber)
            if (item) {
                this.scanNumber = ''
                this.confirmDialogShowFn(item)
            } else {
                this.$message.warning(`查询不到号码为：${this.scanNumber}的记录`, 'msg')
            }
        },
        init() {
            //初始化数据
            // await this.getExamRoomList()
            // this.getSearchFilter()
            //1分钟更新一次
            this.getTabList()
            let _this = this
            clearInterval(this.refreshTime)
            this.refreshTime = setInterval(() => {
                console.log('这里吗？');
                _this.getPatientList()
            }, 60 * 1000);
        },

        // async getPatientInfo() {
        //     let [res, err] = await getPatientList(this.searchData)
        //     if (res) {
        //         this.patientList = res?.ResultList || []
        //         //取第一个
        //         this.confirmDialogShowFn()

        //     }
        // },
        getPatientList(data) {
            //getPatientList
            let params = {}

            if (data) {
                params = {
                    // examType: '',//检查类型
                    dateType: data.DateType,//0 预检时间  1 签到时间   2 登记时间
                    beginDate: data.beginDate,
                    endDate: data.endDate,
                    examRooms: data?.ExamRoomID?.join(','),//,号隔开
                    // orderState: data.orderState,
                    isEnhancement: data?.IsEnhancement,
                    searchTab: data?.SearchTab,
                }

                this.searchData = params
                if (params?.searchTab?.length > 0) {
                    this.tabs = this.tabList.filter(e => params.searchTab.includes(e.DicCode))
                } else {
                    this.tabs = JSON.parse(JSON.stringify(this.tabList))
                }
                //重置至全部
                let index = this.tabs.findIndex(element => element.DicCode == this.activeName)
                if (index == -1) {
                    this.$nextTick(() => {
                        this.activeName = this.tabs[0].DicCode
                    })
                } else {
                    this.$nextTick(() => {
                        this.activeName = this.tabs[index].DicCode
                    })
                }
                this.tabKey = Math.random()
                // this.$nextTick(() => {
                //     this.$refs.topTabs.updateNav();
                // });

                console.log('数据不对哦tabs', this.tabs);
            } else {
                params = this.searchData
            }


            // params.searchTab = this.activeName
            // params.searchTab

            //时间
            console.log('参数对吗========？', params);
            getPatientList(params).then(([res, err]) => {
                if (res?.code == 0) {
                    if (res?.ResultList) {
                        this.allPatientList = res?.ResultList
                        this.getCurrentList()
                    }
                }
                this.inputFocusFn()
            })


        },
        getCurrentList() {
            let item = this.allPatientList?.find(e => e.TabName == this.activeName)
            if (item) {
                this.patientList = item?.MTExamInfos || []
            }
            let shouldRefresh = false
            if(this.tabs.some(e=>{
                let item = this.allPatientList?.find(item => item.TabName == e.DicCode)
                return item?.MTExamInfos?.length != e.count

            })){
                shouldRefresh = true
            }
            this.tabs = this.tabs.map(e => {
                let item = this.allPatientList?.find(item => item.TabName == e.DicCode)
                if (item?.MTExamInfos?.length > 0) {
                    e.count = item.MTExamInfos.length
                    e.name = e.DicValue + '(' + item.MTExamInfos.length + ')'
                }
                return e
            })
            if(shouldRefresh){
                this.tabKey = Math.random()
            }

        },
        inputFocusFn() {
            this.$nextTick(() => {
                this.$refs?.ruleDesc?.focus()
            })
        },
        showFiltrateFn() {
            this.filtrateData.show = true
        },
        closeFiltrateFn() {
            this.filtrateData.show = false
            this.inputFocusFn()
        },
        searchFn(searchData) {

            //搜索数据
            this.filtrateData.show = false
            this.getPatientList(searchData)
        },
        loginOutFn() {
            this.loginOutDialogShow = true
        },
        closeLoginOutFn(loginOut) {
            if (loginOut) {
                //退出登录
                // this.setLogin(null)
                store.commit('user/set_loginInfo', null)
                store.commit('user/set_loginStatus', false)

                clearInterval(this.refreshTime)

                this.$router.push({ path: '/login' })
            }
            this.loginOutDialogShow = false
            this.inputFocusFn()
        },

        detailShowFn(item) {
            if (this.activeName == '0' || this.activeName == '1') {
                this.$message.warning('当前tab不支持核对操作')
                return
            }
            // if (item.OrderState != '已登记') {
            this.confirmDialog.patientData = item
            this.confirmDialog.show = true
            // }
            // this.inputFocusFn()
        },
        confirmDialogShowFn(data) {
            this.confirmDialog.patientData = data
            this.confirmDialog.show = true

        },
        closeConfirmDialogFn() {
            this.confirmDialog.show = false
            this.inputFocusFn()

        },

    },
    components: {
        ListFiltrateVue,
        PatientCellVue,
        LoginOutVue,
        ConfirmDialogVue

    },
}
</script>
<style lang='less' scoped>
::-webkit-scrollbar {
    display: none;
}

::v-deep .el-tabs__nav-prev,
::v-deep .el-tabs__nav-next {
    display: none;
}

.slide-tabs {
    overflow-x: auto;
    white-space: nowrap;
    display: flex;
    margin-bottom: -14px;
    width: 100%;
    padding: 0px;
    // background-color: red;
    // border-bottom: 2px solid #E4E7ED;

}

::v-deep .el-tabs__header {
    // width: 100%;
    // min-width: 390px;
    // background-color: yellow;
    text-align: left;
    // border-bottom: 2px solid #E4E7ED;
}

::v-deep .el-tabs__nav-wrap:after {
    display: none;
}

.slide-tabs /deep/ .el-tabs__nav {
    display: inline-block;
    float: none;
}

.slide-tabs /deep/ .el-tabs__item {
    display: inline-block;
    padding-right: 10px !important;
    padding-left: 10px !important;
    //   margin-right: 10px;
}

.slide-tabs /deep/ .el-tabs__content {
    display: inline-block;
    //   margin-left: -30px;
}

.patient_list {
    width: 100vw;
    height: 100vh;

    background-color: #EBEEF5;
    // #EBEEF5;

}

.number_input {
    // padding: 10px;
    background-color: white;

    ::v-deep .el-input__inner {
        margin: 10px;
        text-align: center;
        width: calc(100% - 20px);
        border: 1px solid #DCDFE6;
    }

    // ::v-deep .el-input__prefix {

    // }
    ::v-deep .el-input__suffix {
        right: 25px;
    }
}

.list_content {
    background-color: #EBEEF5;

    height: calc(100% - 140px);
    // height: 200px;
    overflow-y: auto;
}



.left_btn {
    width: calc(50% - 60px);
    text-align: left;
}

.right_btn {
    width: calc(50% - 60px);
    text-align: right;
}
</style>